<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<script type="text/javascript" src="/Public/js/jquery.js"></script>
	<script type="text/javascript" src="/Public/js/jquery-1.8.3.min.js"></script>
	<link rel="Stylesheet" type="text/css" href="/Public/css/loginDialog.css" />
	<title>后台登录</title>
	<link href="/Public/css/login.css" type="text/css" rel="stylesheet">
</head>
<body>
<style>
	.LoginBox{
		height: 30%;
		width: 20%;
		position:absolute;
		display:none;
		top:150px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 4px;
		z-index:10000;
		background:white;
		/*width:426px;*/
		/*height:282px;*/
		border:3px solid #444;
		border-radius:7px;

	}

	.cd{
		border: 1px solid #DCDEE0;
		vertical-align: middle;
		border-radius: 3px;
		height: 50px;
		font-size: 14px;
		outline: none;
		cursor:pointer ;
	}
	.modal-content {
		position: relative;
		background-color: #fff;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		border: 1px solid #999;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 6px;
		outline: 0;
		-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
		box-shadow: 0 3px 9px rgba(0,0,0,.5);
	}
	.tiprow{
		text-align: center;
	}
</style>


<div class="login">
	<div class="message">中山学院-选课系统</div>
	<div id="darkbannerwrap"></div>
	<form method="post">
		<input name="action" value="login" type="hidden">
		<input class="username"name="username" maxlength="13" placeholder="学号" required="required" type="text">
		<hr class="hr15">
		<input class="password"name="password" placeholder="密码" required="required" type="password">
		<hr class="hr15">
		<div class="yzm">
			<input name="code" class="code" placeholder="请输入验证码" style="width: 50%" required="required" type="text">
			<img class="cd" style="width:45%; "  src="{:U('createCode')}">
		</div>
		<hr class="hr15">
		<div class="type">
			<label><input name="role" type="radio" value="admin" />管理员 </label>
			<label><input name="role" type="radio" value="teacher" />教师 </label>
			<label><input name="role" type="radio" value="student" checked/>学生 </label>

		</div>
		<hr class="hr15">
		<input class="send" value="登录" style="width:100%;" type="button">
		<hr class="hr20">
		<!-- 帮助 <a onClick="alert('请联系管理员')">忘记密码</a> -->
	</form>
	<div class="LoginBox" id="LoginBox">
		<div class="row1">
			Tip<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
		</div>
		<div class="tiprow">

		</div>

	</div>
</div>
<script type="text/javascript">

</script>

<div class="copyright">© power by<a href="#" target="_blank">someone</a></div>
<script>
	//等待dom树加载完后执行
	$(document).ready(function() {
		//关闭
		$(".close_btn").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () {
			$("#LoginBox").fadeOut("fast");
			$("#mask").css({ display: 'none' });
		});
		/**
		 * 点击验证码刷新
		 */
		$(".cd").click(function () {
			create_code();
		});
		/**
		 *ajax发送登录请求
		 */
		$(".send").click(function (){

			if(check_data() == false){
				alert('请确保所有提交的数据不能为空');
				return false;
			}
			$.ajax({
				type: "post",
				url: "{:U('login')}",
				data:getJson(),
				success:function (msg,status) {
					//是要登录失败都刷新下验证码  解决tp下的验证码失效问题
				//	console.log(msg['Rt_Code']);
					if(msg['Rt_Code'] != 1){
						showWindow(msg['Rt_Msg']);
						create_code();
					}
					//登录成功的操作
					if(msg['Rt_Code'] == 1){
						window.location.href="{:U('Index/index')}"
					}
					//根据状态做对应的操作

				}
			});
		});
	});
	/**
	 * 包装需要发送的json数据
	 */
	function getJson() {
		var json = {
			'user_id': $('.username').val(),
			'password': $('.password').val(),
			'type':	$('.type input[name="role"]:checked ').val(),
			'code':$('.code').val(),
		}
		return json;
	}
	//弹窗
	function  showWindow($data) {
		var tip = $('.tiprow');
		tip.text("");
		tip.append($data);
		$("body").append("<div id='mask'></div>");
		$("#mask").addClass("mask").fadeIn("slow");
		$("#LoginBox").fadeIn("slow");

	}
	//简单检验提交的数据不为空就好
	function  check_data() {
		if($(".username").val() == ""|| $(".password").val()== ""|| $(".code").val() == ""){
			return false;
		}
		return true;

	}
	//刷新验证码
	function create_code() {
		var verifyURL = "{:U('createCode','','')}";
		var time = new Date().getTime();
		$(".cd").attr({
			"src": verifyURL + "/" + time
		});

	}
</script>
